import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaTab,
    WeaTop,
    WeaDialog,
    WeaNewScroll,
    WeaAlertPage,
    WeaMoreButton,
    WeaRightMenu,
    WeaLeftTree,
    WeaLeftRightLayout,
    WeaOrgTree
} from "ecCom";
import {WeaTableNew} from "comsMobx";
import {Button} from "antd";
import NoRightComponent from '../NoRightComponent.js';
import AddWorkflowMouldSetting from './AddWorkflowMouldSetting';
import WorkflowSetting from './WorkflowSetting';
import * as IconConstant from '../../constant/IconConstant.js';
import LanguageConstant from '../../constant/LanguageConstant';
import * as Constant from '../../constant/Constant';
import '../../style/mouldListPage.less';

const {getLabel} = WeaLocaleProvider;
const {WeaTable} = WeaTableNew;

@inject("workflowSettingListStore", "addWorkflowMouldSettingStore", "workflowSettingStore")
@observer
class WorkflowSettingListPage extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const {workflowSettingListStore} = this.props;
        workflowSettingListStore.getSystemSetting();
        workflowSettingListStore.getWorkflowTree();
        workflowSettingListStore.getWorkflowListTableData();
    }

    componentWillReceiveProps(nextProps, nextContext) {
    }

    componentWillMount() {
        const {workflowSettingListStore} = this.props;
        workflowSettingListStore.resetWorkflowSettingList();
    }

    render() {
        const {workflowSettingListStore, addWorkflowMouldSettingStore} = this.props;
        const {
            settingWorkflowListTableStore, authorized, loading, onSelectWorkflowListRows, selectedWorkflowKeys,
            onWorkflowListOperatesClick, dialogVisible, saveForm, edit, selectedWorkflowId, layoutRightType, changeWorkflowSettingTabKey,
            detachedMaintenance
        } = workflowSettingListStore;
        const {addWorkflowSetting} = addWorkflowMouldSettingStore;
        if (!authorized) {
            return (<NoRightComponent/>);
        }

        return (
            <div className="workflowsetting-list-page">
                <WeaTop
                    title={getLabel(LanguageConstant.WORKFLOW_SETTING, "流程设置")}
                    icon={<i className={IconConstant.WEATOP_ICON}/>}
                    iconBgcolor={IconConstant.WEATOP_ICON_BG_COLOR}
                    buttons={this.getTopBtns()}
                    loading={loading}
                    showDropIcon={true}
                    dropMenuDatas={this.getDropMenuDatas()}
                >
                    <WeaLeftRightLayout
                        col={detachedMaintenance ? 3 : 2}
                        leftCom={detachedMaintenance ? this.getOrgTree() : this.getWorkflowTree()}
                        midCom={this.getWorkflowTree()}
                    >
                        <Fragment>
                            {
                                layoutRightType == Constant.WORKFLOW_LIST_SETTING_RIGHTLAYOUT_TABLE &&
                                <WeaRightMenu datas={this.getDropMenuDatas()}>
                                    < WeaTable
                                        comsWeaTableStore={settingWorkflowListTableStore}
                                        needScroll={true}
                                        rowSelection={{
                                            onChange: onSelectWorkflowListRows,
                                            selectedRowKeys: selectedWorkflowKeys
                                        }}
                                        getColumns={this.getColumns}
                                        onOperatesClick={(record, index, operate, flag) => onWorkflowListOperatesClick(record, flag)}
                                        draggable={true}
                                    />
                                </WeaRightMenu>
                            }
                            {
                                layoutRightType == Constant.WORKFLOW_LIST_SETTING_RIGHTLAYOUT_DETAIL &&
                                <WorkflowSetting changeWorkflowSettingTabKey={changeWorkflowSettingTabKey}
                                                 workflowId={selectedWorkflowId}/>
                            }
                        </Fragment>
                    </WeaLeftRightLayout>
                </WeaTop>
                {addWorkflowSetting && <AddWorkflowMouldSetting/>}
            </div>
        );
    }

    /**
     * 设置列表列属性
     *
     * @param columns
     * @returns {*}
     */
    getColumns = columns => {
        const {workflowSettingListStore} = this.props;
        const {openSettingDetail} = workflowSettingListStore;
        return columns.map((col) => {
            if (col.dataIndex == "wfname") {
                return {
                    ...col,
                    render(text, record, index) {
                        const {wfid} = record;
                        return (
                            <a style={{color: "#00a9ff"}} onClick={() => openSettingDetail(wfid)}>{text}</a>
                        )
                    }
                }
            }
            return col;
        });
    }

    /**
     * 获取树形组织
     *
     * @returns {*}
     */
    getOrgTree = () => {
        const {workflowSettingListStore} = this.props;
        const {onSelectBySubcompany} = workflowSettingListStore;
        return (
            <WeaOrgTree
                ref={'orgTree'}
                params={{rightStr: 'WorkflowManage:All'}}
                needSearch={true}
                inputLeftDom={`<b>${getLabel(25332, '组织结构')}</b>`}
                treeNodeClick={(event, ids, nodeids, nodes) => {
                    let subCompanyId = ids[0];
                    onSelectBySubcompany({subCompanyId});
                }}
            />
        );
    }

    /**
     * 获取设置流程左侧树
     *
     * @returns {*}
     */
    getWorkflowTree() {
        const {workflowSettingListStore} = this.props;
        const {workflowTreeDatas, workflowTreeRerender, workflowTreeExpandedKeys, onWorkflowTreeExpand, onWorkflowTreeSelect} = workflowSettingListStore;
        return (
            <WeaLeftTree
                datas={toJS(workflowTreeDatas)}
                defaultExpandLevel={1}
                onSelect={(key, topTabCount, countsType) => onWorkflowTreeSelect(key, topTabCount, countsType)}
                key={workflowTreeRerender}
                expandedKeys={toJS(workflowTreeExpandedKeys)}
                onExpand={(keys, node) => onWorkflowTreeExpand(keys, node)}
            />
        );
    }

    /**
     * 获取顶部按钮
     *
     * @returns {Array}
     */
    getTopBtns() {
        const {workflowSettingListStore, addWorkflowMouldSettingStore, workflowSettingStore} = this.props;
        const {openAddWorkflowSettingDialog} = addWorkflowMouldSettingStore;
        const {layoutRightType, affirmDeleteWorkflowSetting, selectedWorkflowKeys} = workflowSettingListStore;
        let topButtons = [];
        let disableDeleteBtn = toJS(selectedWorkflowKeys).length <= 0;
        if (layoutRightType == Constant.WORKFLOW_LIST_SETTING_RIGHTLAYOUT_TABLE) {
            topButtons.push(<Button type="primary"
                                    onClick={() => openAddWorkflowSettingDialog()}>{getLabel(LanguageConstant.NEW_ADD, "新建")}</Button>);
            topButtons.push(<Button type="primary" disabled={disableDeleteBtn}
                                    onClick={() => affirmDeleteWorkflowSetting("", true)}>{getLabel(LanguageConstant.MULTI_DELETE, "批量删除")}</Button>)
        } else if (layoutRightType == Constant.WORKFLOW_LIST_SETTING_RIGHTLAYOUT_DETAIL) {
            const {workflowSettingTabKey} = workflowSettingListStore;
            if (workflowSettingTabKey != Constant.WORKFLOW_SETTING_TAB_MOULDSETTING) {
                const {saveWorkflowSetting, loading} = workflowSettingStore;
                topButtons.push(<Button type="primary" disabled={loading}
                                        onClick={() => saveWorkflowSetting()}>{getLabel(LanguageConstant.SAVE, "保存")}</Button>);
            }
        }
        return topButtons;
    }

    /**
     * 菜单按钮
     */
    getDropMenuDatas() {
        const {workflowSettingListStore, addWorkflowMouldSettingStore} = this.props;
        const {openAddWorkflowSettingDialog} = addWorkflowMouldSettingStore;
        const {layoutRightType, affirmDeleteWorkflowSetting, selectedWorkflowKeys} = workflowSettingListStore;
        const dropMenuDatas = [];
        let disableDeleteBtn = toJS(selectedWorkflowKeys).length <= 0;
        if (layoutRightType == Constant.WORKFLOW_LIST_SETTING_RIGHTLAYOUT_TABLE) {
            dropMenuDatas.push({
                key: '1',
                disabled: false,
                icon: <i className='icon-coms-Add-to'/>,
                content: getLabel(LanguageConstant.NEW_ADD, "新建"),
                onClick: key => openAddWorkflowSettingDialog(),
            });
            dropMenuDatas.push({
                key: '2',
                disabled: disableDeleteBtn,
                icon: <i className='icon-coms-Batch-delete'/>,
                content: getLabel(LanguageConstant.MULTI_DELETE, "批量删除"),
                onClick: key => affirmDeleteWorkflowSetting("", true),
            });
        } else {

        }
        return dropMenuDatas;
    }

}

export default WorkflowSettingListPage;